<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      @clickLeft="goBack"
      left-icon="back"
      leftIcon="arrowleft"
      title="商品详情"
      statusBar="true"
      fixed="true"
      color="#000000"
      backgroundColor="#ffffff"
    ></uni-nav-bar>
    

    <!-- 商品图片 -->
    <view class="goods-image">
      <image :src="product.image" mode="aspectFill"></image>
      <view class="image-count">1/1</view>
    </view>

    <!-- 商品价格信息 -->
    <view class="price-section">
      <view class="price-info">
        <text class="current-price"> {{product.price}} </text>
        <text class="original-price"> {{product.price + 5}} </text>
      </view>
      <text class="sales-count">已售44044件</text>
    </view>

    <!-- 商品标题 -->
    <view class="goods-title">
      <text class="title">{{product.name}}</text>
      <button class="share-btn">
        <text class="share-icon">+</text>
        <text>分享</text>
      </button>
    </view>

    <!-- 优惠券信息 -->
    <view class="coupon-section">
      <view class="section-title">领券</view>
      <view class="coupon-content">
        <text class="coupon-tag">满35减1元（奶茶除外）</text>
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 规格选择 -->
    <view class="spec-section">
      <view class="section-title">规格</view>
      <view class="spec-content">
        <text> {{product.productType}}</text>
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 配送信息 -->
    <view class="delivery-section">
      <view class="section-title">配送</view>
      <view class="delivery-content">
        <text>30分钟送货到寝 | 尽快送达</text>
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 评价信息 -->
    <view class="rating-section">
      <view class="rating-header">
        <text class="title">评价 31621</text>
        <view class="rating-score">
          <text class="score">99%</text>
		   <text class="arrow">></text>
        </view>
      </view>
	  
      <!-- 评价示例 -->
      <view class="rating-item">
        <view class="user-info">
          <image class="user-avatar" src="/static/yonghupinglun.png" mode="aspectFill"></image>
          <text class="username">j****</text>
          <text class="rating-date">2024-12-16</text>
        </view>
		 <view class="comment-content">
		    <text class="text">可以 服务好 速度很快，正新妈妈的味道</text>
		</view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <button class="add-cart-btn">加入购物车</button>
      <button class="buy-now-btn">立即购买</button>
    </view>
  </view>
</template>

<script src="./index.js"></script>
<style src="./../../common/Navbar/navbar.scss" lang="scss" scoped></style>
<style src="./index.scss" lang="scss" scoped></style>
<style scoped>
/* #ifdef MP-WEIXIN || APP-PLUS */
::v-deep ::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}

/* #endif */
</style>
